<template>
  <div class="home">
    <h2>首页</h2>

    <div>name: {{ userStore.name }}</div>
    <div>age: {{ userStore.age }}</div>
    <div>count: {{ userStore.count }}</div>
    <button @click="userStore.addCount()">count++</button>
    <button @click="toPathFun({ path: '/login' })">去登录</button>
    <button @click="test">test unique request</button>
    <button @click="getUserFun()">test unique request whiteList</button>
    <button @click="getJsonpFun()">send Jsonp</button>
  </div>
</template>

<script setup lang="ts">
import { getJsonp, getUser, testUnique } from '@/api/user'
import { useUserStore } from '@/store/useStore'
import { onMounted } from 'vue'

onMounted(() => {
  // console.log('route.query', route.query)
  // console.log('route.params', route.params)
  // console.log('route', route)
  // console.log('env', import.meta.env)
  // console.log('env.VITE_BASE_URL', import.meta.env.VITE_BASE_URL)
  // jsonp
  // jsonp('/v1/jsonp').then(res => {
  //   console.log('jsonp success',res);
  // })
})
const userStore = useUserStore()

const test = () => {
  testUnique({ username: 'xw', password: '123' }).then((res) => {
    console.log('res', res)
  })
}
const getUserFun = () => {
  getUser({ id: 1, age: 18 }).then((res) => {
    console.log('res', res)
  })
}
const getJsonpFun = () => {
  getJsonp({ name: 'xw', age: 18 }).then((res) => {
    console.log('res getJsonp', res)
  })
}

import { useRouter } from 'vue-router'
const router = useRouter()
const toPathFun = ({ path, name }: { path?: string; name?: string }) => {
  path && router.push({ path: path, query: { name: 'xiaowu' } })
  name && router.push({ name: name, query: { name: 'xiaowu', id: 1 } })
}
</script>

<style lang="scss" scoped></style>
